<template>
	<div>
		<el-table class="tableData" :data="tableDataFn" highlight-current-row border stripe style="width: 100%"
			:fit="true">
			<el-table-column type="index" :index="1" width="50" label="序号" fixed="left">
			</el-table-column>

			<template v-for="item in tableColumns">
				<el-table-column :prop="item.prop" :label="item.label" :sortable="item.sortable" align="center"
					v-if="item.isShow" :key="item.prop" :fixed="item.fixed">
					<template v-slot="scope">
						<template v-if="item.format == 'ISENABLED'">
							<div>
								<template v-if="scope.row[item.prop] == 'Y'">
									<el-tag type="success">监控中</el-tag>
								</template>
								<template v-else-if="scope.row[item.prop] == 'N'">
									<el-tag type="danger">待开启</el-tag>
								</template>
								<template v-else>
									<el-tooltip class="item" effect="dark" :content="scope.row[item.prop]"
										placement="right">
										<el-tag type="danger" effect="dark">异常值</el-tag>
									</el-tooltip>
								</template>
							</div>
						</template>
						<template v-else-if="item.format == 'user'">
							<div v-if="scope.row[item.prop] != 'F'">
								{{ scope.row[item.prop] }}
							</div>
							<div v-else style="text-align: center">
								<el-tag type="info" size="mini" effect="plain" style="width: 100%">
									&nbsp;空&nbsp;
								</el-tag>
							</div>
						</template>
						<template v-else-if="item.format == 'password'">
							<div v-if="scope.row[item.prop] != 'F'">
								<template v-if="scope.row['showPswd']">
									{{ scope.row[item.prop] }}
								</template>
								<template v-else> ****** </template>
								<i class="el-icon-view pswdBtn" @click="showPswdFn(scope.$index, scope.row)"></i>
							</div>
							<div v-else style="text-align: center">
								<el-tag type="info" size="mini" effect="plain" style="width: 100%">
									&nbsp;空&nbsp;
								</el-tag>
							</div>
						</template>

						<template v-else-if="item.format == 'alertLevelConfig'">
							<div>
								{{ alertLevelConfigOptionText(scope.row[item.prop]) }}
							</div>
						</template>
						<template v-else>
							<div>
								{{ scope.row[item.prop] }}
							</div>
						</template>
					</template>
				</el-table-column>
			</template>
		</el-table>
	</div>
</template>

<script>
	import tableColumns from "./NodeOSColumns";
	import moment from "moment";
	import {
		submitAdmin
	} from "@/api/index.js";
	export default {
		props: ["tableData"],
		computed: {
			tableDataFn() {
				return this.tableData.filter((item) => {
					item["createdate"] = moment(item["createdate"]).format(
						"YYYY-MM-DD HH:mm:ss"
					);
					return item;
				});
			},
		},
		data() {
			return {
				tableColumns: tableColumns,
				alertLevelConfigOption: [],
			};
		},
		created() {
			let _postData = {
				opera: "GetAlertGroupIndex",
				curPage: 1,
				pageSize: 10000,
				sort: {
					sortColumn: "",
					sortOrders: "",
				},
				filtersType: "exactquery", // 精确查询
				filters: {},
			};

			submitAdmin({
				postData: JSON.stringify(_postData),
			}).then((res) => {
				this.alertLevelConfigOption = res.data;
			});
		},
		methods: {
			showPswdFn(index, row) {
				row["showPswd"] = !row["showPswd"];
				// 更新数据
				this.$set(this.tableDataFn, index, row);
			},
			alertLevelConfigOptionText(id) {
				let _text = "";
				this.alertLevelConfigOption.forEach((element) => {
					if (element.ID == id) {
						_text = element.TITLE;
					}
				});

				return _text;
			},
		},
	};
</script>
